<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贷款页面</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
</head>
<style>

    #d1 {
        width: 480px;
        height: 86vh;
        position: absolute;
        margin-top: 2vh;
        /*margin-left: 400px;*/
        right: 500px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 16px;
        text-align: center;
        /**/
        /*    内容超出时，打开滚动条*/
        overflow: auto;
    }

    .h1 {
        margin-top: 50px;
    }
    .prod > input[type=button] {
        width: 100px;
        height: 40px;
        border-radius: 5px;
        background-color: lightpink;
        margin-top: 10px;
    }

    .d1 {
        width: 100%;
    }
    .d1 >select{
        width: 200px;
        height: 20px;
        margin-top: 50px;
    }
    #u_name{
        width: 200px;
        height: 20px;
        margin-top: 50px;
    }
    .prod {
        margin-top: 10px;
        width: 94%;
        margin-left: 3%;
        height: 180px;
        border: 1px solid gray;
        border-radius: 5px;
    }

    .prod > h2 {
        margin-top: 20px;
    }
    .d{
        display: none;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0vh;
        left: 0vh;
        background: rgba(48,48,48,0.7);
    }
   #dv1>input[type=text]{
       width: 200px;
       height: 40px;
       margin-top: 20px;
       padding-left: 10px;
   }
   #dv1>select{
       width: 200px;
       height: 40px;
       margin-top: 20px;
   }
    #dv1>input[type=button]{
        width: 100px;
        height: 40px;
        border-radius: 5px;
        margin-top: 20px;
    }
</style>
<script>
    $(function () {
        var uid = $("#userid").text()
        //查询贷款产品信息
        $.ajax({
            url: "/LoansServlet",
            data: {action: "finAll"},
            type: "post",
            dataType: "json",
            success: function (d) {
                  // console.log(d);
                if (d.code == 1) {
                    var s = "";
                    //循环拼接字符串
                    for (var i = 0; i < d.data.length; i++) {
                            $(".d1").append("<div class=\"prod\">" +
                                "<h2>"+d.data[i].l_name +"</h2>" +
                                "<br><span>日利率&emsp;："+d.data[i].l_rate+"%</span><br>" +
                                "<input type=\"button\" class=\"b\" value=\"贷款\" onclick='f("+d.data[i].l_id+")'>" +
                                "</div>")
                    }
                    //渲染
                    // $(".d1").html(s);
                }
            }
        })
        // 下拉列表
        $.ajax({
            type: "post",
            url: "/BankServlet",  //访问后台去数据库查询select的选项,此处需填写后台接口路径
            dataType: "json",
            data: {
                action: "findUid", u_id: uid,
            },
            success: function (d) {
                // console.log(d)

                if (d.code == 1) {
                    for (var i = 0; i < d.data.length; i++) {
                        var a = d.data[i].c_id;
                        var b = a.substring(a.length - 4);
                        $(".laySelect").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>")
                    }
                }
            }
        })
        //查询当前用户信息
        $.ajax({
            url: "/userServlet",
            type: "post",
            data: {
                action: "findUserByU_id",
                userid:uid
            },
            dataType:"json",
            success: function (d) {
                console.log(d)
                if(d.code==1){
                  $(".u_name").val(d.data.u_name);
                    $(".u_idcard").val(d.data.u_idcard);
                }else{
                    alert(d.msg);
                }
            },
            error: function () {
                alert('Error');
            }
        })


    //
    //      //点击贷款事件（弹出遮罩）
    //      $(".b1").click(function () {
    // })

        //确定提交事件
        $("#btn9").click(function (){
            //开启遮罩层
            //  $("#applyForLoan").show();

            //获取当前要贷款的产品id
            var id=$("#l_id").val();
            //获取下拉框选中项
            var c_id = $(".laySelect").select().val();   //下拉框选中项
            var u_name = $(".u_name").val();              //姓名
            var u_idcard = $(".u_idcard").val();                //身份证号
            var quota = $(".quota").val();           //贷款金额
            var u_id = $("#userid").text();

            if (c_id == "-1") {
                alert("请选择贷款及还款账户");
                return;
            }
            if(quota==""){
                alert("请填写要贷款的金额");
                return;
            }
            //请求后端，执行贷款
            $.ajax({
                url:"/LoansServlet",
                type:"post",
                data:{
                    action:"loans",
                    c_id:c_id,
                    u_id:u_id,
                    u_name:u_name,
                    u_idcard:u_idcard,
                    quota:quota,
                    l_id:id
                },
                dataType:"json",
                success:function (d){
                    if(d.code==1){
                        alert(d.msg);
                        //清空文本框
                        //清空文本框数据
                        $(".u_id").val("");
                        $(".u_name").val("");
                        $(".u_idcard").val("");
                        $(".quota").text("0");
                        $(".laySelect").select().val("-1")
                        //关闭遮罩层
                        $("#applyForLoan").hide();
                    }else {
                        alert(d.msg);
                    }
                }
            })
        })
        //取消
        $("#btn10").click(function (){
            //清空贷款金额
            $(".quota").val("");           //贷款金额
            //关闭遮罩
            $("#applyForLoan").hide();
        })
    })
function f(id){

    $("#l_id").val(id);
    $("#applyForLoan").show();

}
</script>

<body>
<!--主体部分-->
<div id="d1">
    <h1 class="h1">贷款</h1>
    <div class="d1">
<!--                        <div class="prod"><h2>hhhhh</h2><br><span>日利率&emsp;：0.3%</span><br><input type="button" class="b" value="贷款"></div>-->
    </div>
</div>
<!--修改时，弹出层 ，弹出遮罩层，和内容-->
<!--办理贷款-->
<div id="applyForLoan" class="d"
    style=" display: none;width: 100%;height: 100vh;position: fixed;top: 0vh;left: 0vh;background: rgba(48,48,48,0.7);">
    <div id="dv1"
         style="width:500px;height:600px; display: block; position: absolute;  background-color: rgba(255,255,255,1);left: 70vh;top: 10vh;text-align: center">
        <h1 style="margin-top: 50px">办理贷款</h1>
        <input type="hidden" id="l_id">
        <span>&emsp;&emsp;&emsp;姓&emsp;&emsp;名：</span><input type="text" class="u_name" placeholder="请输入姓名" disabled><br>
        <span>&emsp;&emsp;&emsp;身份证号：</span><input type="text" class="u_idcard" placeholder="请输入身份证号" disabled><br>

        <span>&emsp;&emsp;&emsp;贷款金额：</span><input type="text" class="quota" placeholder="请输入贷款金额" ><br>
        <span>贷款及还款账户：</span><select name="interest" id="proName" class="laySelect">
        <option value="-1">----请选择----</option>
    </select><br>
        <input type="button" value="确定" id="btn9" style="margin-right: 30px">
        <input type="button" value="取消" id="btn10">
    </div>
</div>
</body>
</html>